<template>
  <div style="margin-top: 20px" class="deleteMultiBtn">
    <ClearBtn @click="hanleClearSelect">清空选中</ClearBtn>
  </div>

  <el-card class="box-card">
    <el-table ref="multipleTableRef" :data="adminList" style="width: 100%" stripe max-height="400"
      @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="55" />

      <el-table-column label="注册时间" width="150">
        <template #default="scope">
          {{ dayjs(scope.row.createTime).format('YYYY/MM/DD') }}
        </template>
      </el-table-column>


      <el-table-column property="username" label="用户名" width="150" show-overflow-tooltip />


      <el-table-column label="头像">
        <template #default="scope">
          <el-avatar :src="store.state.BaseUrl + scope.row.avatar" :size="50" />
        </template>
      </el-table-column>

      <!-- 下面是编辑和搜索框 -->
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="Administrator to search" />
        </template>

        <template #default="scope">
          <el-popconfirm title="确定删除吗?" @confirm="handleDelete(scope.$index, scope.row)">
            <template #reference>
              <el-button size="small" type="danger">Delete</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>
  </el-card>

  <el-dialog v-model="dialogVisible" title="提示" width="30%">
    <span>确定要删除了</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="handleDeleteAll">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, inject, computed, defineExpose, defineAsyncComponent } from 'vue'
import { ElMessage, ElTable } from 'element-plus'
import { getGeneralAdministrator, deleteAdministrtaor, deleteAdministrtaorAll } from '@/utils/adminHttp'

import dayjs from 'dayjs'
const ClearBtn = defineAsyncComponent(() => import('@/components/button/ClearBtn.vue'))

const dialogVisible = ref(false)


interface User {
  avatar: string
  createTime: string
  username: string,
  [popos: string]: any
}

const store: any = inject('store')
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
//  这个是选择中的数据
const multipleSelection = ref<User[]>([])
// 每选择一次机会给 multipleSelection数组 加一个数据
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const tableData = ref<User[]>([])

// 搜索
const search = ref('')

// search搜索框筛选的内容 
const adminList = computed(() => tableData.value.filter(item => item.username.includes(search.value)))


// 删除单个管理员
const handleDelete = (index: number, row: User) => {
  deleteAdministrtaor(row._id, row.avatar).then(res => {
    if (res.data.ok) {
      tableData.value.splice(index, 1)
      ElMessage({
        showClose: true,
        message: res.data.info,
        type: 'success',
      })
    } else {
      ElMessage.error(res.data.info)
    }
  })
}


// 获取数据
function getAdminData(): void {
  getGeneralAdministrator().then(res => {
    tableData.value = res.data.info
  })
}

getAdminData()

defineExpose({ getAdminData })

// 清空显示输入框
const hanleClearSelect = function () {
  dialogVisible.value = true
}

// 清空函数
const handleDeleteAll = function () {
  dialogVisible.value = false

  const delBatchItem = multipleSelection.value.map(item => item._id)
  if (!delBatchItem.length) return ElMessage.error('不能一个不选')

  const filenames = multipleSelection.value.map(item => item.avatar.split('/')[1])
  deleteAdministrtaorAll(delBatchItem, filenames).then(res => {
    if (res.data.ok) {
      tableData.value = tableData.value.filter(item => !delBatchItem.includes(item._id))
      ElMessage({
        message: res.data.info,
        type: 'success',
      })
    } else {
      ElMessage.error(res.data.info)
    }
  }).catch(err => ElMessage.error('服务器错误 请检查token'))
}
</script>

